<template lang="html">
  <div v-loading="loading" class="main-panel">
    <el-button type="primary" @click="configDialog('post')">添加</el-button>
    <el-dialog v-loading="loading" title="编辑" :visible.sync="configDiaIsShow" class="diaForm" :append-to-body="false">
      <el-form
        ref="configRef"
        :model="configForm"
        :rules="configRules"
        label-width="140px"
      >
        <el-form-item label="车牌号" prop="plate_number">
          <el-col :span="15">
            <el-input
              v-model="configForm.plate_number"
              type="text"
              placeholder="请输入车牌号"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="editConfig()"
          >确认
          </el-button>
          <el-button @click="configDiaIsShow = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div v-for="config in configList">
      <span>{{ config.name }}</span>
      <span>{{ config.value }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      configList: [],
      configSearchForm: {},
      configTableData: [],
      configTableDataPaginateCurrentPage: 1,
      configTableDataPaginateTotal: 1,
      configTableDataPaginateLastPage: 1,
      configTableDataPaginateTotalPageSize: 10,
      configTableDataPaginateTotalPageSizes: [10, 20, 50, 100],
      configTab: [],
      configEditType: 'post',
      configDiaIsShow: false,
      configForm: {},
      configRules: {
        mobile_number: [{
          required: true,
          trigger: 'blur'
        }],
        password: [{
          required: true,
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.getConfigList()
  },
  methods: {
    getConfigList() {
      this.loading = true
      this.$store.dispatch('config/getConfigList').then((res) => {
        this.configData = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    deleteConfig(row) {
      // console.log(row)
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true
          this.$store.dispatch('main/deleteConfig', { id: row.id }).then((res) => {
            this.getConfigList()
            this.loading = false
            this.configDiaIsShow = false
            this.$message({
              type: 'success',
              message: res.msg
            })
          }).catch(() => {
            // this.loading = false
            return false
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editConfig() {
      switch (this.configEditType) {
        case 'post':
          this.$refs['configRef'].validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('config/postConfig', this.configForm).then((res) => {
                this.getConfigList()
                this.configForm = {}
                this.loading = false
                this.configDiaIsShow = false
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false
            }
          })
          break
        case 'put':
          this.$refs['configRef'].validate((valid) => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('config/putConfig', this.configForm).then((res) => {
                this.getConfigList()
                this.configForm = {}
                this.loading = false
                this.configDiaIsShow = false
                this.$message({
                  type: 'success',
                  message: res.msg
                })
              }).catch(() => {
                this.loading = false
              })
            } else {
              return false
            }
          })
          break
      }
    },
    configDialog(type, row) {
      this.configDiaIsShow = true
      switch (type) {
        case 'post':
          this.configEditType = 'post'
          break
        case 'put':
          this.configEditType = 'put'
          // 这里一定要使用nextTick的方式赋值，不然会卡住input
          this.$nextTick(() => {
            //   this.$set(this.configForm, 'id', row.id)
          })
          break
        default:
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main-panel {
  padding: 18px;
  font-size: 10px;
}
</style>
